<template>
  <div class="h-100 flex-column">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item label="">
        <el-input clearable placeholder="名称" v-model="filterData.name" />
      </el-form-item>
      <el-form-item label="">
        <el-input clearable placeholder="编码" v-model="filterData.code" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="search" />
        <el-button type="primary" @click="editFormVisible = true"> 新增字典 </el-button>
      </el-form-item>
    </el-form>
    <div id="table_contain" class="flex-100">
      <CustomTable
        :height="tableHeight"
        :columns="tableDataColumns"
        v-loading="loading"
        :data="tableData"
        @row-click="rowClick"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? '启用' : '禁用' }}
        </template>
        <template #edit="{ row }">
          <el-button size="small" :icon="Edit" plain type="warning" @click="edit(row)">
            编辑
          </el-button>
          <el-button size="small" :icon="Delete" plain type="danger" @click="del(row)">
            删除
          </el-button>
        </template>
      </CustomTable>
    </div>
    <Page
      :page-data="pageData"
      :total="total"
      @page-no-change="pageNoChange"
      @page-size-change="pageSizeChange"
    />
    <DictEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      type="1"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { deleteDict, pageSysDict, selectDict } from '@/api/system'
import Page from '@/components/Page.vue'
import Table from '@/components/CustomTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import DictEditForm from '@/views/systemManage/dictionary/components/DictEditForm.vue'
import { bus } from '@/utils'
import { usePage } from '@/hooks/usePage'
import { useCalcTableHeight } from '@/hooks/useCalcTableHeight'
import CustomTable from '@/components/CustomTable'

let rowData: any
const editFormVisible = ref<boolean>(false)
let filterData = ref({ name: '', code: '' })

const tableDataColumns = [
  { type: 'index' },
  { prop: 'state', label: '状态', width: 80, template: true },
  { prop: 'name', label: '字典名称', width: 200 },
  { prop: 'code', label: '字典编码', width: 160 },
  { prop: 'sort', label: '字典排序', width: 160 },
  { prop: 'remark', label: '字典描述', width: 200 },
  { prop: 'edit', label: '操作', width: 180, template: true, fixed: 'right' }
]

const { tableHeight } = useCalcTableHeight()
const { loading, tableData, pageData, total, search, pageNoChange, pageSizeChange } = usePage(
  pageSysDict,
  filterData
)

function rowClick(row: any) {
  bus.emit('searchDictValue', row?.id)
}

async function getTableData() {
  await search()
  bus.emit('searchDictValue', null)
}

async function edit(row: any) {
  const { data, success } = await selectDict(row?.id)
  if (!success) {
    return
  }
  rowData = reactive(data)
  editFormVisible.value = true
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除${row.name}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const { success, msg } = await deleteDict(row?.id)
    if (!success) {
      ElMessage.error(msg)
      return
    }
    ElMessage.success('操作成功')
    await getTableData()
  })
}

onMounted(async () => {
  await getTableData()
})
</script>

<style scoped lang="scss"></style>
